<template>
  <div class="page cancelVerifi">
    <div class="scroll-view">
      <customHeader :middleTitle="step==1?'电子券核销':'验证电子券'" />
      <div class="page-body">
        <template v-if="step==1">
          <ul class="form-style">
            <li>
              <span>数字码</span>
              <div>
                <input type="number" v-model="voucherId" placeholder="请输入数字码" />
              </div>
            </li>
          </ul>
          <div class="btn-wrap">
            <div class="btn" @click="getData(1)">验证</div>
          </div>
        </template>
        <template v-if="step==2">
          <ul class="form-style">
            <li>
              <span>核销门店</span>
              <div>{{data.shopName}}</div>
            </li>
            <li>
              <span>商品名称</span>
              <div class="disabled">{{data.goodsSalesName}}</div>
            </li>
            <li>
              <span>售价</span>
              <div>{{data.nowPrice}}</div>
            </li>
            <!-- <li>
              <span>券有效期</span>
              <div>{{formateDateTime(data.expirationTime)}}</div>
            </li> -->
            <li>
              <span>可核销份数</span>
              <div>{{data.allowConsumeNum}}份</div>
            </li>
          </ul>
          <ul class="form-style">
            <li>
              <span>本次核销份数</span>
              <div v-if="params.ticketType==1">
                <div class="num-box">
                  <i
                    class="zhk-js"
                    :class="minClass ? 'activeClass' : 'disabledClass' "
                    @click="numberChange('reduce')"
                  ></i>
                  <input class="buy-num" name type="number" v-model.trim="counter" />
                  <i
                    class="zhk-zj"
                    :class="addClass ? 'activeClass' : 'disabledClass' "
                    @click="numberChange('add')"
                  ></i>
                </div>
              </div>
              <div v-if="params.ticketType==0" class="disabled">{{counter}}</div>
            </li>
          </ul>

          <div class="btn-wrap">
            <div class="btn" @click="save">已与顾客确认 立即核销</div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import customHeader from '../../components/header/header';
import { Toast, MessageBox } from 'mint-ui';
import moment from "moment";
import jsBridge from "../../tools/jsBridge.js";
export default {
  name: 'cancelVerifi',
  data() {
    return {
      step: 2,
      minClass: false,
      addClass: true,
      counter: 1,
      maxCount: 1,
      params: {},
      data: {},
      voucherId: "",
    };
  },

  methods: {
    formateDateTime(date) {
      if (date>0) {
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      } else {
        return "不限制";
      }
    },
    numberChange(type) {
      if (type == "reduce" && this.counter > 1) {
        this.counter = parseInt(this.counter) - 1;
      }
      if (type == "add" && this.counter < this.maxCount) {
        this.counter = parseInt(this.counter) + 1;
      }
    },
    //校验码并且获取信息
    getData(step) {
      if(step==1&&!this.voucherId){
        Toast("请输入数字码");
        return;
      }
      const url = "/newapp/mall/coupon/verifyCoupon.do";
      const params = { voucherId: this.voucherId, shopId: this.params['shopId'],codeType:this.params.ticketType };
      this.ajax({
        url: url,
        type: "post",
        data: params,
        controlLoading: true
      })
        .then(res => {
          if (res.success) {
            this.step = 2;
            const data = res.resultObject;
            this.data = data;
            this.maxCount = data.allowConsumeNum;
          } else {
             MessageBox.alert(res.msg).then(action => {
                jsBridge.closeWindow();
            });
          }
        })
        .catch((err) => {

        });
    },
    save() {
      if (!this.data['accountId']) {
        Toast("未获取到券信息");
        return;
      }
      MessageBox({
        title: "请核对核销信息是否有误",
        message: '<div class="sure-info"><div>核销门店：' + this.data.shopName + '</div><div>核销商品：' + this.data.goodsSalesName + '</div><div>核销份数：' + this.counter + '</div></div>',
        confirmButtonText: '立即核销',
        cancelButtonText: '取消',
        showCancelButton: true
      }).then((action) => {
        if (action == 'confirm') {
          this.submitAjax();
        }
      })
    },
    submitAjax() {
      const url = "/newapp/mall/coupon/consumeGoodsVoucher.do";
      let params = {shopId: this.params['shopId'], accountId: this.data.accountId, shopName: this.data.shopName, verifyNums: this.counter, codeType:this.params.ticketType};
      if(this.params.ticketType==1){
          params["voucherId"]=this.voucherId;
      }else{
         params["itemCode"]=this.voucherId;
         params["voucherId"]=this.data.voucherId;
      }
      params 
      this.ajax({
        url: url,
        type: "post",
        data: params,
        controlLoading: true
      })
        .then(res => {
          let params = {};
          if (res.success) {
            params['type'] = "success";
            params['id'] = res.resultObject;
            params['goodsSalesName'] = this.data.goodsSalesName;
            params['facePrice'] = this.data.facePrice;
            params['count'] = this.counter;
            params['ticketType'] =this.data.ticketType;/** 电子券类型 1:代金券 2:套餐券 */
          } else {
            params['type'] = "fail";
            params['msg'] = res.msg;
          }
          this.$router.push({ path: '/cancelVerifi/cancelVerifiResult', query: params });
        })
        .catch((err) => {
  
        });
    },

  },
  watch: {
    counter(newValue, oldValue) {
      if (newValue <= 1) {
        if (newValue < 1) {
          this.counter = 1;
        }
        this.minClass = false;
        this.addClass = true;
      } else if (newValue > 1 && newValue < this.maxCount) {
        this.minClass = true;
        this.addClass = true;
      } else {
        if (newValue > this.maxCount) {
          this.counter = this.maxCount;
        }
        this.minClass = true;
        this.addClass = false;
      }
    }
  },
  components: {
    customHeader,
  },
  mounted() {
    //shopId 门店id
    // shopName 门店名称
    // ticketType  电子券类型 手动：0或者是扫码：1
    // ticketCode  券码
    this.params = this.$route.query;
    if(isNaN(this.params.ticketType)){
      Toast("券码参数错误");
      return;
    }else{
      this.params.ticketType=Number(this.params.ticketType);
    }
    this.step = 2;
    this.voucherId = this.params['ticketCode'];
    setTimeout(()=>{
      this.getData();
    },200);

  },
};
</script>
<style lang='scss' scoped>
@import "cancelVerifi";
</style>
<style lang='scss'>
@import "../../style/public";
.sure-info {
  color: #999;
  @include remCalc(font-size, 32);
  text-align: left;
}
</style>
